<template>
  <div class="footer_wrap">
    <div class="footer_tab">
      <div class="tab_list" v-for="(item,index) in nav" @click="toggle(index)" :class="{'active': item.router === activeRouter}" :key="index">
        <i class="iconfont" :class="item.baseClass"></i>
        <span class="nav_title">{{item.title}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'foot',
  data () {
    return {
      activeRouter: '',
      nav: [
        {
          baseClass: 'icon-home2',
          title: 'Home',
          router: 'index'
        },
        {
          baseClass: 'icon-zhongchou',
          title: 'Funding',
          router: 'warmUp'
        },
        {
          baseClass: 'icon-shangcheng3',
          title: 'Mall',
          router: 'mall'
        },
        {
          baseClass: 'icon-wode-',
          title: 'My',
          router: 'userCenter'
        }
      ]
    };
  },
  beforeMount () {
    this.getRoute();
  },
  methods: {
    getRoute () {
      let routeName = this.$route.name;
      if (routeName === 'progressing' || routeName === 'finish') routeName = 'warmUp';
      this.activeRouter = routeName;
    },
    toggle (index) {
      if (this.nav[index].router !== this.activeRouter) this.$router.push({path: this.nav[index].router});
    }
  }
};
</script>
<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .footer_wrap{
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 90;
    width: 100%;
    // Bottom navigation
    .footer_tab{
      border-top:1px solid #e6e6e6;
      background-color:#fff;
      height:100px;
      display: flex;
      text-align: center;
      .tab_list{
        height:100px;
        flex-grow: 1;
        color:#888;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        animation-duration: .5s;
        .nav_title{
          font-size:26px;
        }
        .iconfont{
          font-size: 44px;
          line-height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        &.active{
          color: $color;
        }
      }
    }
  }
</style>
